<template>
  <view class="index">
    <view class="result">
      <view class="my">我的{{ relationLink }}</view>
      <view class="text">{{
        result.label ? "我称呼：" + result.label : ""
      }}</view>
    </view>
    <view class="cal">
      <view class="row">
        <view class="col" @click="addRelation('爸爸')">父</view>
        <view class="col" @click="addRelation('妈妈')">母</view>
        <view class="col" @click="addRelation('哥哥')">兄</view>
        <view class="col" @click="addRelation('姐姐')">姐</view>
        <view class="col" @click="addRelation('弟弟')">弟</view>
        <view class="col" @click="addRelation('妹妹')">妹</view>
        <view class="col" @click="addRelation('儿子')">子</view>
        <view class="col" @click="addRelation('女儿')">女</view>
        <view class="col" @click="addRelation('老公')">夫</view>
        <view class="col" @click="addRelation('妻子')">妻</view>
        <view class="col" @click="backRelation">←</view>
        <view class="col" @click="clearAllRelation">清空</view>
      </view>
    </view>
    <view class="btn" @click="submit">{{
      isUnlock ? "计算" : "看广告获取计算结果"
    }}</view>
    <view class="pub_ad_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adBannerIdDouyin"
        :ad-intervals="30"
        :fixed="false"
        type="banner"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      relationList: [],
      relationshipMap: {
        爸爸: {
          爸爸: "祖父",
          妈妈: "祖母",
          哥哥: "伯父/叔父",
          姐姐: "姑母",
          弟弟: "弟弟",
          妹妹: "妹妹",
          儿子: "儿子",
          女儿: "女儿",
        },
        妈妈: {
          爸爸: "外祖父",
          妈妈: "外祖母",
          哥哥: "舅舅",
          姐姐: "姨母",
          弟弟: "弟弟",
          妹妹: "妹妹",
          儿子: "儿子",
          女儿: "女儿",
        },
        哥哥: {
          爸爸: "父亲",
          妈妈: "母亲",
          哥哥: "自己",
          姐姐: "姐姐",
          弟弟: "弟弟",
          妹妹: "妹妹",
          儿子: "侄子",
          女儿: "侄女",
        },
        姐姐: {
          爸爸: "父亲",
          妈妈: "母亲",
          哥哥: "哥哥",
          姐姐: "自己",
          弟弟: "弟弟",
          妹妹: "妹妹",
          儿子: "外甥",
          女儿: "外甥女",
        },
        弟弟: {
          爸爸: "父亲",
          妈妈: "母亲",
          哥哥: "哥哥",
          姐姐: "姐姐",
          弟弟: "自己",
          妹妹: "妹妹",
          儿子: "侄子",
          女儿: "侄女",
        },
        妹妹: {
          爸爸: "父亲",
          妈妈: "母亲",
          哥哥: "哥哥",
          姐姐: "姐姐",
          弟弟: "弟弟",
          妹妹: "自己",
          儿子: "外甥",
          女儿: "外甥女",
        },
        儿子: {
          爸爸: "自己",
          妈妈: "妻子",
          哥哥: "儿子",
          姐姐: "女儿",
          弟弟: "儿子",
          妹妹: "女儿",
          儿子: "孙子",
          女儿: "孙女",
        },
        女儿: {
          爸爸: "丈夫",
          妈妈: "自己",
          哥哥: "儿子",
          姐姐: "女儿",
          弟弟: "儿子",
          妹妹: "女儿",
          儿子: "外孙",
          女儿: "外孙女",
        },
        老公: {
          爸爸: "岳父",
          妈妈: "岳母",
          哥哥: "大伯/小叔",
          姐姐: "大姑/小姑",
          弟弟: "小叔",
          妹妹: "小姑",
          儿子: "儿子",
          女儿: "女儿",
        },
        妻子: {
          爸爸: "公公",
          妈妈: "婆婆",
          哥哥: "大伯/小叔",
          姐姐: "大姑/小姑",
          弟弟: "小叔",
          妹妹: "小姑",
          儿子: "儿子",
          女儿: "女儿",
        },
      },
      result: {
        label: "",
      },
    };
  },
  onLoad(option) {
    adVideoCreate();
  },
  computed: {
    relationLink() {
      let text = "";
      for (let i in this.relationList) {
        text += this.relationList[i] + "的";
      }
      text = text.substring(0, text.lastIndexOf("的"));
      return text;
    },
  },
  methods: {
    backRelation() {
      this.relationList.pop();
    },
    clearAllRelation() {
      this.relationList = [];
    },
    addRelation(type) {
      if (this.relationList.length > 1) {
        this.global.toast("暂支持到二级关系");
        return;
      }
      this.relationList.push(type);
    },
    selectGender(val) {
      this.formData.gender = val;
    },
    calculate() {
      if (this.relationList.length == 1) {
        this.result.label = this.relationList[0];
      } else if (this.relationList.length == 2) {
        this.result.label =
          this.relationshipMap[this.relationList[0]][this.relationList[1]];
      }
      this.isUnlock = true;
    },
    submit() {
      if (this.relationList.length == 0) {
        this.global.toast("请选择关系");
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.calculate();
            });
          } catch (error) {
            this.calculate();
          }
        });
      } else {
        this.calculate();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.btn {
  margin-top: 30rpx;
  background: #8b77ff;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.pub_ad_banner {
  margin-top: 30rpx;
}

.result {
  background: #000;
  .my {
    color: #ccc;
    background: #272727;
    padding: 10px 10px;
  }
  .text {
    padding: 80px 0;
    display: flex;
    align-content: center;
    justify-content: center;
    color: #fff;
  }
}

.cal {
  background: #000;
  color: #fff;
  .row {
    .col {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      width: 25%;
      text-align: center;
      line-height: 100px;
      &:nth-of-type(-n + 4) {
        border-top: 1px solid #ccc;
      }
    }
    &:after {
      clear: both;
      display: block;
      content: "";
    }
  }
}
</style>